<form class="layui-form g-form" id="md_form" lay-filter="md-form">
    <input name="modelId" class="layui-hide" value="">
    <input name="id" class="layui-hide" value="">
    <input name="columnName" class="layui-hide" value="">
    <div class="pro-col-name layui-hide" id="proColNameZone">
        <span>属性名称：<em id="proName"></em></span>
        <span style="margin-left: 20px;">字段名称：<em id="colName"></em></span>
    </div>
    <div class="layui-form-item layui-hide" id="proNameZone">
        <label class="layui-form-label red-star">属性名称</label>
        <div class="layui-input-block">
            <div class="layui-input-inline">
                <input name="propertyName"
                       placeholder="输入属性名称"
                       lay-verType="tips"
                       lay-verText="属性名称为必填项"
                       lay-verify="required"
                       class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label red-star">属性类型</label>
        <div class="layui-input-block">
            <div class="layui-input-inline">
                <select id="_proType" name="propertyTypeId" lay-verType="tips" lay-verText="字段类型为必选项" lay-verify="required">
                    <option value="">选择属性类型</option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label red-star">字段类型</label>
        <div class="layui-input-block">
            <div class="layui-input-inline">
                <select id="_colType" name="columnTypeId" lay-verType="tips" lay-verText="字段类型为必选项" lay-verify="required">
                    <option value="">选择字段类型</option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">字段长度</label>
        <div class="layui-input-block">
            <div class="layui-input-inline">
                <input class="layui-input"
                       placeholder="输入字段长度"
                       name="columnLength"
                       lay-verify="mynumber"
                       lay-verType="tips"
                       type="number">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label red-star">属性说明</label>
        <div class="layui-input-block">
            <input type="text" name="remark" lay-verify="required" lay-reqText="属性说明不允许为空" lay-verType="tips"
                autocomplete="off" placeholder="填写属性说明" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="md-form-submit">提交保存</button>
            <button class="layui-btn layui-btn-primary" id="closeBtn">关闭</button>
        </div>
    </div>
</form>

<script>
    layui.use(['layer', 'form', 'util', 'admin', 'global'], async function () {
        const assit = layui.admin
        const form = layui.form
        const layer = layui.layer
        const $ = layui.$
        const config = layui.global

        var data = config.getCache('md-form-data')
        const event = data.event
        var obj = data.entity

        // 加载 selector
        const d = await assit.fetchMDTypeData();
        // console.log(d)
        assit.initSelector(d.proTypeList, $('#_proType'))
        assit.initSelector(d.colTypeList, $('#_colType'))

        form.val('md-form', obj)
        if (event === 'edit') {
            $("#proColNameZone").removeClass('layui-hide')
            $("#proNameZone").addClass('layui-hide')
            $('#proName').text(obj.propertyName)
            $('#colName').text(obj.columnName)
        } else if(event === 'add') {
            $("#proColNameZone").addClass('layui-hide')
            $("#proNameZone").removeClass('layui-hide')
        } else {
            return;
        }

        form.render('select', 'md-form')

        form.verify({
            mynumber: function (value, item) {
                if (value !== '' && !(/^\d+$/.test(value))) {
                    return '只能是纯数字或者留空'
                }
            }
        })

        form.on('submit(md-form-submit)', function (data) {
            const obj = JSON.parse(JSON.stringify(data.field))
            obj.columnName = config.toLine(obj.propertyName)
            // console.log("即将提交 ==>", obj)
            assit.post('/model/detail', obj).then(r =>{
                if (r.code === 0) {
                    layer.msg('修改成功', {icon: 1})
                    assit.finishPopupCenter()
                }
            })
            return false
        })

        $('#closeBtn').click(function() {
            assit.closePopupCenter()
            return false // 禁止页面刷新、跳转
        })

    })
</script>